<script setup lang="ts">
import { ref, defineProps } from 'vue'

const { tableThs, tableTrs } = defineProps({
  tableThs: {
    type: [Array, String],
    default: () => {
      return ['标准版', '进取版', '精英版', '豪华版']
    },
  },
  tableTrs: {
    type: [Array, String],
    default: () => {
      return [
        { name: '电动天窗', data: ['○', '○', '●', '●'] },
        { name: '胎压监测', data: ['○', '●', '●', '●'] },
        { name: '真皮座椅', data: ['○', '●', '●', '●'] },
        { name: '上坡辅助', data: ['●', '●', '●', '●'] },
        { name: '自动驾驶', data: ['○', '○', '○', '●'] },
        { name: '偏离预警', data: ['○', '○', '○', '●'] },
        { name: '侧面气囊', data: ['○', '○', '○', '●'] },
        { name: '自动空调', data: ['○', '○', '●', '●'] },
        { name: '感应雨刷', data: ['○', '○', '●', '●'] },
        { name: '倒车影像', data: ['○', '○', '●', '●'] },
        { name: 'ESP 防滑', data: ['●', '●', '●', '●'] },
        { name: '十年质保', data: ['●', '●', '●', '●'] },
        { name: '原厂脚踏', data: ['●', '●', '●', '●'] },
        { name: '偏离预警', data: ['○', '○', '○', '●'] },
        { name: '侧面气囊', data: ['○', '○', '○', '●'] },
        { name: '自动空调', data: ['○', '○', '●', '●'] },
        { name: '感应雨刷', data: ['○', '○', '●', '●'] },
      ]
    },
  },
  widthList: {
    type: Array,
    default: () => {
      return [1, 2, 2, 2, 2]
    },
  },
})

const selectMenu1 = ['全部分类', '精选优品', '价格较低', '只买贵的', '其他方式']
const selectMenu1Value = ref(0)
const cityChange = (e: { detail: { value: number } }) => {
  selectMenu1Value.value = e.detail.value
}

// const toDetail = () => {
//   uni.navigateTo({
//     url: `/pages/college/collegeDetail/collegeDetail`,
//   })
// }

// table
const thStart = ref(0)
const thStartX = ref(0)
// const listWidth = ref(375)
const scrollLeft1 = ref(0)
const scrollLeft2 = ref(0)

const thMove = (e) => {
  let x = e[0][0]
  x *= -1
  x += thStartX.value
  if (x <= 0) {
    return
  }
  if (x > listWidth.value) {
    return
  }
  scrollLeft2.value = x
}
const scroll = (e: { detail: { scrollLeft: number } }) => {
  scrollLeft1.value = e.detail.scrollLeft
}
</script>

<template>
  <view class="college-recruit flex-column wh100p">
    <view class="recruit-pageList flex-column">
      <text class="title">{{ '招生章程' }}</text>
      <view v-for="(item, index) of 3" :key="index" class="item-list">
        {{ '2023年重庆医科大学招生章程' }}
      </view>
    </view>
    <view class="recruit-pageList flex-column">
      <text class="title" style="border: 0">{{ '招生计划' }}</text>
      <view class="mt10 flex w100p gap12">
        <picker v-for="(item, index) of 4" :key="index" :range="selectMenu1" :value="selectMenu1Value" @change="cityChange">
          <view
            class="uni-input flex-center"
            style="background-color: #f2f2f2; width: 120rpx; padding: 10rpx 15rpx; border-radius: 20rpx; font-size: 22rpx"
          >
            {{ selectMenu1[selectMenu1Value] }}
          </view>
        </picker>
      </view>
      <view class="w100p" style="min-height: 300rpx">
        <scroll-view
          class="gui-scroll-x"
          :scroll-left="scrollLeft2"
          scroll-x
          scroll-y
          style="width: 700rpx; height: 400rpx"
          @scroll="scroll"
        >
          <view class="flex-column">
            <view class="flex" style="background-color: white; position: sticky; top: 0; z-index: 4; left: 0">
              <view class="" style="left: 0; z-index: 5; position: sticky; background-color: white">
                <text class="gui-data-tb-text gui-primary-text gui-border-b">
                  {{ '配置对比' }}
                </text>
              </view>
              <view :style="{ width: 200 * tableThs.length + 'rpx' }">
                <view class="gui-flex gui-row gui-nowrap" style="">
                  <text v-for="(td, tdidx) in tableThs" :key="tdidx" class="gui-data-tb-text gui-border-b gui-primary-text">
                    {{ td }}
                  </text>
                </view>
              </view>
            </view>
            <view class="flex">
              <view class="" style="background-color: white; position: sticky; left: 0">
                <text v-for="(item, index) in tableTrs" :key="index" class="gui-data-tb-text gui-primary-text gui-border-b" style="">
                  {{ item.name }}
                </text>
              </view>
              <view :style="{ width: 200 * tableThs.length + 'rpx' }">
                <view v-for="(item, index) in tableTrs" :key="index" class="gui-flex gui-row gui-nowrap">
                  <text v-for="(td, tdidx) in item.data" :key="tdidx" class="gui-data-tb-text gui-border-b gui-primary-text">
                    {{ td }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.recruit-pageList .title {
  width: 100%;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #edefe9;
}

.recruit-pageList .item-list {
  width: 100%;
  padding: 15rpx;
  border-bottom: 3rpx solid #edefe9;
}

.gui-data-tb {
  width: 750rpx;
}

.gui-data-tb-l {
  width: 200rpx;
  overflow: hidden;
}

.gui-data-tb-text {
  width: 200rpx;
  font-size: 26rpx;
  line-height: 50rpx;
  height: 90rpx;
  overflow: hidden;
  padding: 20rpx 10rpx;
  display: block;
  box-sizing: border-box;
  text-align: center;
}

.gui-data-tb-r {
  width: 550rpx !important;
  overflow: hidden;
}
</style>
